<template>
    <el-dialog :title="this.$root.lang.userinfo.buyLog.invoice.preview" :visible.sync="showDialog" @close="closeDialog" width="80%"  :close-on-click-modal="false" :close-on-press-escape="false">
      <el-table
        v-loading="listLoading"
        :data="previewList"
        :empty-text="$root.lang.userinfo.buyLog.order.noData"
        size="small"
        border
        style="width: 100%"
        >
        <el-table-column
          width="80"
          align="center"
          :label="$root.lang.userinfo.buyLog.order.amount">
          <template slot-scope="scope">
            <span>{{ scope.row.amount | dataFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="250"
          align="center"
          :label="$root.lang.userinfo.buyLog.order.orderNo">
          <template slot-scope="scope">
            <span>{{ scope.row.orderNo | dataFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="70"
          align="center"
          :label="$root.lang.userinfo.buyLog.order.orderDesc">
          <template slot-scope="scope">
            <span>{{ scope.row.orderDesc | dataFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="140"
          align="center"
          :label="$root.lang.userinfo.buyLog.order.creTime">
          <template slot-scope="scope">
            <span>{{ scope.row.creTime | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="140"
          align="center"
          :label="$root.lang.userinfo.buyLog.order.completionTime">
          <template slot-scope="scope">
            <p>{{ scope.row.completionTime | dateFormat }}</p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$root.lang.userinfo.buyLog.order.productDesc">
          <template slot-scope="scope">
            <span>{{ scope.row.productDesc | dataFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          align="center"
          :label="$root.lang.userinfo.buyLog.order.printInvoice">
          <template slot-scope="scope">
            <span>{{ baseState.printInvoice, scope.row.printInvoice, '--' | matchValue }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="140"
          align="center"
          :label="$root.lang.userinfo.buyLog.order.printInvoiceTime">
          <template slot-scope="scope">
            <span>{{ scope.row.printInvoiceTime | dateFormat }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="right">
        <el-button @click="onSubmit()" :loading="loading" type="primary">{{ this.$root.lang.userinfo.buyLog.confirm }}</el-button>
      </div>      
    </el-dialog>
</template>

<script>
import '@/options/baseState'
export default {
  name: 'InvoicePreview',
  data() {
    return {
    	loading: false,
    	showDialog: this.show,
    	form: {
    	},
      baseState: baseState,
      listLoading: false,
    }
  },
  watch: {
    show: function (value) {
      if(this.$refs['form']) this.$refs['form'].resetFields()
      this.showDialog = value
  	},
  },
  props: {
  	show: {
      type: Boolean,
      default: false
    },
    previewList: {
    	type: Array,
    	default: []
    }
  },
  methods: {
  	closeDialog() {
      this.$emit('editReceive',{
        key: 'showPreview',
        value: this.showDialog
      })
    },
  	onSubmit() {
      let param = {
        orderIds: this.$parent.selectIdList
      }
      this.loading = true
      this.request({
        url: '/payment/invoice/apply',
        method: 'post',
        data: this.$root.optionProcess(param)
      }).then(response => {
        this.loading = false
        this.$message({
          message:  this.$root.lang.confirm.applySuccess,
          type: 'success',
          duration: 3 * 1000
        })
        this.showDialog = false
        this.$emit('reload')
      }).catch(error => {
        this.loading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    }
  },
  created() {
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.right {
  text-align: right;
  margin-top: 10px;
}
</style>